Crear tu primera web flash

Al finalizar este tutorial nuestra web de galeria debe quedar mas o menos asi: Terminado, tambien aqui les dejo los archivos del tutorial.
Bueno, ya aclarados los preámbulos y definiendo que es lo que se supone aprenderemos, comenzamos.

1ª Parte Las Propiedades

Antes de comenzar cualquier trabajo en flash debemos definir bien las propiedades de nuestra película, ya que después trabajaremos sobre esto y hacer en cambios en un futuro nos puede causar dolores de cabeza o simplemente, un buen tiempo perdido.
Para este tutorial utilice las siguientes propiedades:
Tamaño: 600×400 Píxeles
Fondo: Blanco (#FFFFFF)
Velocidad de Fotograma (FrameRate): 15 fps
Version: Flash placer 8
Orden de Descarga: “Bottom up”
Action Script: 2
Calidad JPEG: 80
AudioStream: MP3 16 kbps, mono
Audio Evento: MP3 16 kbps, mono
Estas son las propiedades que yo creí convenientes para nuestra película.

2ª Parte El Preloader

Bueno, vamos a entrar de lleno a esto del flash y atenderé a que quienes están leyendo esto, tienen un breve conocimiento de Flash, mínimo las nociones básicas y un poco de entendimiento del código de Action Scriop II.
En nuestra escena en el primer fotograma creamos un rectángulo pequeño con la herramienta “Rectangle Tool” ® que nos quede mas o menos del siguiente tamaño: 160×8 px, si no queda así vamos al menú de propiedades y lo ajustamos.

Ya que tenemos nuestro rectángulo, lo seleccionamos aplicándole doble clic, para que seleccione el relleno y las líneas y con el segundo botón presionamos la opción “Convert to Symbol” (Convertir en Símbolo) y en la ventana emergente seleccionamos la opción Movie Clip y le ponemos el nombre de: “Barra”.

Después de esto, veremos que cambio un poco la forma en que se selecciona, el rectángulo; de nuevo le damos doble clic, y nos manda a un escenario con otra línea de tiempo, pero con la diferencia que aun lado del nombre de la escena 1, aparece “Barra” seleccionado, esto quiere decir que estamos sobre el MovieClip barra y no sobre el escenario principal.
En nuestra línea de tiempo seleccionamos hasta el fotograma 100 y presionamos F5 para insertar fotogramas. En el fotograma 100, presionamos F6 para insertar un “keyFrame” pero copiando nuestro fotograma anterior. Ahora aquí viene algo delicado, regresamos a nuestro fotograma 1, y solo seleccionamos el relleno de rectángulo hasta hacerlo prácticamente invisible:

Y con el fotograma 1 seleccionado, en el panel de propiedades, buscamos la el menu Tween (Animación) y seleccionamos la opción: Shape (Transformación). Si hemos hecho todo de forma correcta, al presionar “Enter” y reproducir esta línea de tiempo, parecera que se va llenando de izquierda a derecha hasta que en el fotograma 100, se vea completamente lleno.
Teniendo nuestro MC(Así llamare los MovieClip en delante) que será nuestra barrita de carga, regresamos al escenario principal y seleccionamos la herramienta texto (T).
Insertamos un texto “100%” y nos vamos la pestaña de propiedades: la cual debe de quedar así:

Ahora simplemente nos basta crear otro pequeño texto simple, con la palabra Loading o Cargando, para que el usuario sepa lo que esta pasando.
Creamos otra capa en la línea de tiempo y la renombramos como “ACCIONES” y presionamos (F9) para abrir nuestra ventana de acciones. En esta insertamos el siguiente código:

function cargando() {
// Declaración de variables
var total, cargados, porcentaje;
// A la variable «total» se le asigna el tamaño de la pelicula en bytes
total = _root.getBytesTotal();
// A la variable «cargados» se le asignan el total de bytes hasta el
//momento descargados de la web
cargados = _root.getBytesLoaded();
//Por medio de una regla de tres obtiene el porcentaje cargado y redondea el valor con la función
//»Math.floor»
porcentaje = Math.floor((cargados*100)/total);
//Asigna al campo de texto porcentaje_txt el porcentaje cargado
porcentaje_txt.text = porcentaje+» %»;
//Mueve la barra de carga al frame correspondiente al porcentaje
barra_mc.gotoAndStop(porcentaje);
//Si la cantidad de bytes cargados es igual a la cantidad total de bytes
if (cargados == total) {
//Hacer que se deje de ejeuctar esta función
clearInterval(hiloPrecarga);
//Iniciar la pelicula
play();
}
}
// setInterval nos servira para que la función «cargando» se ejecute cada 1 milisegundo
// Asi, nuestra función revisara constantemente la cantidad de bytes descargados
// y solo iniciara la pelicula hasta que la descarga termine
// la variable «hiloPrecarga» nos servira para saber que esta corriendo nuestra función
// y frenar su ejecución cada milisegundo por medio de «clearInterval»
var hiloPrecarga = setInterval(cargando, 1);
//Evita que inicie la pelicula
stop();

Y ahora para que esto funcione, solo falta agregar el nombre de las instancias a los objetos del preloader (barra y 100%) los cuales debe tener los siguientes nombres de instancias: Barra = barra_mc y el texto dinámico 100% = porcentaje_txt
¡Y listo! Ahora solo falta insertar otra escena (Insert>Scene) para continuar.

3ª Parte Los Componentes

Componente Tree
Bueno, ya tenemos nuestro preloader, ya podemos pasar de lleno a lo que nos interesa, como hacer nuestro sitio web, así que; al mal paso, darle prisa y es por esto que nos meteremos de lleno a los componentes.
Como antes mencionaba utilizaremos 4 componentes para nuestro sitio, Loader, ProgressBar, Tree y UIScrollBar.
Insertamos de nuestro panel de componentes en nuestro escenario principal Loader, ProgressBar y Tree todos en una misma capa, la que llamaremos “components” quedando más o menos así:

El orden no importa para nada en el funcionamiento, solo le di este por mera estética, más adelante veremos por que.
Seleccionamos el componente “Tree” y le aplicamos las siguientes propiedades:
Tamaño: 216.14×102.8 px Coordenadas: x= 25.5 y= 239.4 Nombre de Instancia: my_tree
Y con los siguientes parámetros en el inspector de componentes:
En al primera parte de la Imagen VI, tenemos la paestaña “Parameters” seleccionada y las propiedades:
multipleSeleccion: false; esto evita que se puedan seleccionar mas dos objetos del menú, en una galería de imágenes seria desastroso cargar varias al mismo tiempo.
rowHeight: 20; define el tamaño de las columnas.

En la segunda parte de la imagen, encontramos la pestaña “Schema” y un recuadro en blanco con los botones “agregar” (+) y “quitar”(-). Presionamos en agregar y nos aparecerá abajo un recuadro con lo parámetros, debe quedar exactamente así, para que nuestro menú funcione.
field name: dataProvider es nombre de nuestro vinculo, el cual hará una llamada a nuestro archivo XML, el cual crearemos mas delante.
data type: XML; seleccionamos el tipo de datos a cargar, en este caso XML
validation options: {ignoreWhite} ignora los campos blancos del código y viene por defecto.
required: si el archivo a cargar es requerido o no, para el funcionamiento, en este caso es verdadero.
read only: Solo leer el archivo. En este caso Falso.
kind: False. formatter: False. storage type: Complex.
Listo, ya determinamos las propiedades de nuestro componente y como obtendrá los datos a mostrar, ahora solo basta determinar cuales son, es aquí donde entra el XML, mas delante explicare como funciona, por ahora solo dejo el archivo: Gallery_tree.xml

<?xml version=»1.0″?>
<tree>
<node label=»Concierto Garbage»>
<node label=»En el Slam» src=»g1.jpg» />
<node label=»El After» src=»g2.jpg» />
<node label=»El escenario» src=»g3.jpg» />
<node label=»El escenario II» src=»g4.jpg» />
<node label=»Duke Ericcson y yo» src=»g5.jpg» />
</node>
</tree>

Este archivo lo guardamos en la misma carpeta de nuestra película.
En el archivo XML, en la primera etiqueta determinamos el tipo de lenguaje y la versión activa
Después crearemos nuestras propias etiquetas y estas funcionaran de la siguiente manera, será la etiqueta principal, funcionara como menú principal y en jerarquía menor, y con la etiqueta de “src” determina la url de donde se obtendrán las imágenes y bajo que nombre se deben mostrar.
Nota: No es indispensable que tengan nombres seriados las imágenes, sin embargo es recomendable, para evitar posibles errores de interpretación.
Nuestro archivo XML esta dictando que las imágenes se obtendrán del mismo directorio que nuestra película, sin embargo; puedes estar en sub carpetas, solo asignándole su ruta relativa “./imágenes/g1.jpg” por ejemplo.
Ahora regresamos a nuestro escenario principal y creamos otra capa a la que llamaremos “Acciones”, aquí presionamos de nuevo F9 para abrir nuestro panel de acciones y escribiremos el siguiente código:

var my_pb:mx.controls.ProgressBar;
var my_ldr:mx.controls.Loader;
var my_tree:mx.controls.Tree;

my_pb._visible = false;
my_pb.indeterminate = true;
my_pb.setSize(160, 30);
my_pb.source = my_ldr;
my_pb.mode = «polled»;
var pbListener:Object = new Object();
pbListener.complete = function(evt:Object) {
evt.target._visible = false;
};
my_pb.addEventListener(«complete», pbListener);

var treeDP_xml:XML = new XML();
treeDP_xml.ignoreWhite = true;
treeDP_xml.onLoad = function(success:Boolean) {
if (success) {
my_tree.dataProvider = this.firstChild;
}
};

treeDP_xml.load(«gallery_tree.xml»);
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var treeNode:XMLNode = evt.target.selectedItem;
if (treeNode.attributes.src != undefined) {
my_pb._visible = true;
my_ldr.load(treeNode.attributes.src);
}
};
my_tree.addEventListener(«change», treeListener);
stop()

Este el código completo para todos lo componentes, nos fijaremos solo lo referente a tree; aunque este es código completo para los otros dos componentes.
Bien, con esto estamos terminando este tutorial de Macromedia Flash Profesional 8, para la creación de un sitio desde cero, utilizando componentes.

Componente Progress Bar

El componente de barra progreso es un recurso bástate ágil para trabajos de importación de archivos. El uso de este componente nos ahorra bastante tiempo en ejecutar loaders propios y claro tiempo en su configuración y escribir el código para que flash lo interprete.
Bueno, a lo que nos interesa la configuración. A este componente le asignaremos el nombre de instancia de: “my_pb”. (Si sois observadores se habrán dado que cuenta que en el código arriba expuesto tiene varios llamados:

var my_pb:mx.controls.ProgressBar; //Definimos la variable my_pb
//Definimos las Propiedades
my_pb._visible = false; //Si visible o falso
my_pb.indeterminate = true;
my_pb.setSize(160, 30); //El tamaño
my_pb.source = my_ldr; //A que objeto aplica, en este caso el loader.
my_pb.mode = «polled»; //el modo
//Creamos la function a partir de la variable ya definida.
var pbListener:Object = new Object();
pbListener.complete = function(evt:Object) {
evt.target._visible = false;
};
my_pb.addEventListener(«complete», pbListener);

Y ahora vamos a las propiedades en el inspector de componentes:

La onda es que debe de quedar de la forma anterior; son prácticamente los mismos del componente Tree, solo varían las algunos elementos.

Loader

Este componente nos muestra siempre un objeto, imagen o película en terminada posición, es decir cumple la función de un LoadMovie; solo lo hace diferente por el método y el modo de configuración.
Seleccionamos este y le asignamos le siguiente nombre de instancia: “my_ldr” y ahora al igual que el Progress Bar ya esta definido en el código expuesto líneas arriba.

var my_ldr:mx.controls.Loader; //definimos la variable
//——————————————-esta es la funcion de tree
treeDP_xml.load(«gallery_tree.xml»);
var treeListener:Object = new Object();
treeListener.change = function(evt:Object) {
var treeNode:XMLNode = evt.target.selectedItem;
if (treeNode.attributes.src != undefined) {
my_pb._visible = true;
my_ldr.load(treeNode.attributes.src); //Aqui se define que es lo que mostrara el loader
}
};
my_tree.addEventListener(«change», treeListener);

Bien las propiedades son las siguientes:

Bien ahora tenemos nuestros tres componentes principales, Progress Bar, Loader y Tree; para probar el funcionamiento, no vamos a nuestra carpeta en windows donde deben de estar los siguientes archivos:
tu_sitio/galeria_tree.fla
tu_sitio/galeria_tree.swf
tu_sitio/galeria_tree.xml
tu_sitio/imagen1.jpg
tu_sitio/imagen2.jpg
tu_sitio/imagen3.jpg
tu_sitio/imagen4.jpg
tu_sitio/imagen5.jpg
Desde luego intercambiando los nombres que vosotros han escogido y el número de imágenes que tengáis para mostrar y si las tienen en sub carpetas quedaría así:
tu_sitio/xml/galeria_tree.xml
tu_sitio/imágenes/imagen1.jpg
tu_sitio/imágenes/imagen2.jpg
tu_sitio/imágenes/imagen3.jpg
tu_sitio/imágenes/imagen4.jpg
tu_sitio/imágenes/imagen5.jpg
tu_sitio/galeria_tree.swf
tu_sitio/galeria_tree.swf
Revisado esto, volvemos al flash y presionamos ctrl.+ enter para hacer una vista previa del archivo ya en función. Te darás cuenta que el archivo ya funciona, veras como en la parte inferior ya esta una carpeta con el nombre que le hayas asignado y si presionas en ella, aparecerán las imágenes que definiste en tu archivo XML.

Nota: Hago esta acotación para anexar que este es solo un ejemplo simple con carga de imágenes, sin embargo se puede usar el componente Tree como menú, solo modificando un poco el código y hacer cargas de SWF en lugar de JPGs. Todo es cosa de practica y un poco de ingenio.

4ª Parte. Textos Dinámicos.

Anteriormente una de las cosas mas frustrantes de flash eran los textos, en un principio te enviaba el texto como vector y generalmente tenia un terminado demasiado malo, además que para actualizar la web y cambiar los textos de las noticias por ejemplo, era necesario trabajar directamente en la película, lo que causa una perdida de tiempo y labores excesivas.
Tiempo después se integro la opción de trabajar con salidas de texto HTML e incluso cargar el contenido del texto con un archivo externo. ¡Que maravilla! Y todos los “flasheros” del mundo fuimos sumamente felices. Sin embargo como antes mencionaba en otros textos, ninguna estado de felicidad es permanente, pues la salida del texto era muy mala y generalmente configurarlo era cosa de locos.
Últimamente flash permite integrar contenidos directamente de bases de datos, “esto hasta el momento si es la gloria”, y además también permite corregir el diseño visual mediante un archivo CSS, lo cual es en realidad genial.
En este tutorial no me meteré con bases de datos (por ahora) porque eso el algo complejo, sin embargo si me explicare como cargar un HTML definiendo su estilo mediante CSS, y de paso utilizaremos el componente UIScrollBar para controlarlo.
Comenzamos creando otra capa la cual llamaremos ‘texto’. Seleccionamos la herramienta texto (T) creamos un cuadro “texto” valga la repetición, en la parte superior de nuestra película, tratando de cuadrarlo al nivel del componente Tree y ahí mismo cargamos el componente UIScrollBar justo aun lado de el.
Seleccionamos nuestro cuadro te texto y le asignamos el nombre de instancia de “my_text”, como en los casos anteriores de este modo identificara el programa al cuadro de texto.

Con el botón derecho del Mouse (ctrl.+ clic en Mac) buscamos la opción “Scrollable” o “Desplazamiento permitido” le damos las propiedades que se muestran en la imagen. Ahora presionamos F9 para abrir nuestra ventana de acciones y le insertamos el siguiente código:

//Ahora comenzamos con la importacion de texto desde HTML
//al cual le daremos formato por propieaddes CSS
var myStyle:TextField.StyleSheet = new TextField.StyleSheet();
//creamos la variable myStyle
myStyle.load(«estilo.css»); //cargamos el archivo CSS
my_text.styleSheet = myStyle;
//Definimos las propiedades de nuestro cuadro de texto
my_text.multiline= true;
my_text.wordWrap = true;
my_text.html = true;
var story:XML = new XML(); //creamos la variable historia de XML
story.ignoreWhite = true;
story.load(«galeria.html»); //cargamos el archivo HTML
story.onLoad = function () {
my_text.htmlText = story;
}

Con esto le decimos a Flash que debe definir el estilo del texto según las propiedades definidas en el archivo “estilo.css” y que cargue el texto sin propiedades del archivo HTML.
Bien aquí dejo el código del archivo que use para definir el estilo del archivo cargado por el flash.
“estilo.css”

title {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight:200;
}
body {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.cursiva {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-style:italic;
}
.des {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
font-weight: bold;
color:#006600;
}
td {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
th {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
form {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
select {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
ul {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
list-style-type: square;
list-style-position: outside;
}
li {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
ol {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
list-style-type: decimal;
list-style-position: outside;
}
.small {
font-family: Arial, Helvetica, sans-serif;
font-size: 8px;
}
.big {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
font-weight: bold;
}
.bodystyle {
font-family: Arial, Helvetica, sans-serif;
font-size: 10px;
}
.box1 {
padding: 3px;
border-width: thin;
border-style: solid;
border-color: #CCCCCC #666666 #666666 #CCCCCC;
}
.box2 {
border-width: 3px;
border-style: solid;
padding: 5px;
}
a:link {
font-family:Arial, Helvetica, sans-serif;
font-size:10px;
outline:double;
color:#FF3300;
}

Y pues ya encaminado el ratón, aquí el archivo HTML
“galeria.html”

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>
<html xmlns=»http://www.w3.org/1999/xhtml»>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=iso-8859-1″ />
<title></title>
<link href=»estilo.css» rel=»stylesheet» type=»text/css» />
</head>

<body>
<p class=»big»>Galeria con Flash 8</p><br/>
<p align=»left»>Este es un ejemplo ya activo de como funsionan los componentes ProgressBar, Tree, UIScrollBar y loader; a trabajar con el entorno de programacion Action Script II y XML, asi como crear un preloader simple con barra de desplazamiento.</p><br/>
<p align=»left»>Para este ejemplo utilce unas fotos (de muy mala calidad por cierto) para la demostracion de galeria, pues si hubiera usado las que bienen con este ejemplo original (las de Macromedia) lo mas seguro es que me haya metido en problemas y eso es lo ultimo que queremos, por eso utilice las fotos del concierto de Gabarge. El diseño tambien es malo, peor eso no es lo que interesa si no el ejemplo traducido… No?</p><br/>
<p align=»left»>Bueno en realidad es una traduccion, adaptacion y explicacion del ejemplo de «Gallery Tree» que viene en esta version de Macromedia Flash 8 Profesional, solo que le agregue elementos «extras» para hacer un tutorial completo y ademas que sea compatible con la version Flash MX 2004. A continuacion dejo una lista de lo que pretendo aprendamos en esta version: </p>
<ul>
<li><span class=»des»>Preloader</span>: Como crear nuestro propia barra de precarga personalizada. </li>
<li><span class=»des»>Componente Tree</span>: Como utilizar este componente para crear menus de arbol mediante XML</li>
<li><span class=»des»>XML</span>: Crear nuestros archivos como interprete entre Flash y otros metodos.</li>
<li><span class=»des»>Action Scrpit II</span>: Una rapida descripcion del uso de de AS II.</li>
<li><span class=»des»>Componente Loader</span>: Utilizacion del componente Loader para imagenes.</li>
<li><span class=»des»>Texto Dinamico</span>: Utilizacion de textos dinamicos. HTML y CSS en un flash de forma dinamica.</li>
<li><span class=»des»>CSS</span>: Breve explicacion de lenguaje CSS.</li>
</ul>
<p> Espero que lo que aqui se ve, sirva de ayuda a los foreros en su viaje de aprendisaje por el mundo de Flash. Si gustan desean aprender mas y obtener mas informacion sobre este tutorial, no dudeis en consultar, para estamos en <a href=»http://www.forocreativo.net» target=»_blank»>ForoCreativo.Net</a>, <a href=»http://www.foro-creativo.com» target=»_blank»>Foro-Creativo.Com</a>, <a href=»http://www.mandrivia.net»>Mandrivia.Net</a> y <a href=»http://www.darkartforum.net» target=»_blank»>DarkArtForum.com</a>. </p>
</body>
</html>

Si sois observadores encontraran que este archivo HTML se esta definiendo como XHTML y el navegador lo tratara como XML en las etiquetas personalizadas, en este archivo no hay ninguno, sin embargo se podrían haber incluido sin problemas. Su función practica seria por ejemplo para obtener la información mediante una base de datos por ejemplo MySql; pero eso lo veremos en otro tutorial.

5ª Parte Conclusiones

Bien señores llegamos a la parte en la que todos vosotros sois mucho mejores que yo, “el diseño”; por lo cual aquí no tengo mucho que comentar.
Bien este es un ejemplo bastante simple de cómo crear nuestras galerías en flash de forma dinámica. Si vos eres nuevo en esto de la programación y los modos dinámicos, pensaras que es demasiado complejo, sin embargo una vez perdiéndole el miedo y tomando el hilo, nos percataremos que existen miles de ventajas de trabajar con numeritos en nuestros sitios, en lugar de hacerlo de forma tradicional; una de ellas es ahorro de tiempo al momento de actualizar.
Bien con esto termino mi primer tutorial sobre Flash Profesional 8, espero en los días posteriores a este, subir algunos otros más; si me es posible, hasta llegar a poder construir sitios profesionales en este espectacular programa.

Saludos.

Por Kitsch, http://www.tallerwebmaster.com/